<template>
  <div class="page flex-col">
    <div class="group_th1 flex-col">
      <div class="image-wrapper_tht1 flex-col">
        <img class="image_th1" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/ac232d27f0f2460b581d9df18a0a45ca" />
      </div>
    </div>
    <div class="group_th2 flex-col">
      <img class="image_th2" referrerpolicy="no-referrer"
        src="https://lanhu-oss.lanhuapp.com/761725c1e27799c8de1fedba41cfcc50" />
      <div class="group_th3 flex-col">
        <div class="group_th4 flex-col">
          <div class="box_th1 flex-col">
            <div class="group_th5 flex-row">
              <img class="image_th3" referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/cf142e0a1a4f062d074c2a99a581fefd" />
              <span class="text_th2">我是标题我是标题</span>
              <img class="image_th4" referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/768ae740d7a0e4f6d0ddcedf51933def" />
            </div>
            <img class="image_th5" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/2ac213531ed6a44b5566d66f3e8dd685" />
          </div>
          <div class="box_th2 flex-col">
            <div class="group_th6 flex-col">
              <div class="image-wrapper_th3 flex-col">
                <img class="image_th6" referrerpolicy="no-referrer"
                  src="https://lanhu-oss.lanhuapp.com/a4dd5137fd5ae348724240e8f3b44bc3" />
              </div>
            </div>
            <div class="group_th7 flex-col"></div>
            <div class="text-wrapper_th2 flex-col">
              <span
                class="paragraph_th1">文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息文字内容信息<br /></span>
            </div>
          </div>
          <div class="image-wrapper_th2 flex-col" @click="goBackMain">
            <img class="label_th1" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/fa85f11284ca7722c2e033ef188682b3" />
          </div>
        </div>
        <img class="label_th2" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/e3541f8cc41ea7c23d97ff841dab30d1" />
        <img class="image_th7" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/0fb1a4f11aad667ce9c5384835c6958f" />
        <div class="image-wrapper_th4 flex-col">
          <img class="image_th8" referrerpolicy="no-referrer" @click="jumpToFour"
            src="https://lanhu-oss.lanhuapp.com/07890156872670d0907abf33f6db166a" />
        </div>
        <div class="group_th8 flex-col">
          <div class="image-wrapper_th5 flex-row">
            <img class="thumbnail_1" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/71f2d4a1e76e9d528363acb1cdb4915e" />
          </div>
          <div class="text-wrapper_th3 flex-row">
            <span class="text_th3">想问什么尽管戳我</span>
          </div>
          <div class="image-wrapper_th6 flex-row">
            <img class="label_th3" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/11a14639fd58f97635f534aa727831e6" />
          </div>
        </div>
        <div class="text-wrapper_thl1 flex-col">
          <span class="text_th1">课程章节标题1</span>
        </div>
        <div class="text-wrapper_thl4 flex-col">
          <span class="text_th4">课程章节标题2</span>
        </div>
        <div class="text-wrapper_thl5 flex-col">
          <span class="text_th5">课程章节标题3</span>
        </div>
        <div class="text-wrapper_thl6 flex-col">
          <span class="text_th6">课程章节标题4</span>
        </div>
        <div class="text-wrapper_thl7 flex-col">
          <span class="text_th7">课程章节标题5</span>
        </div>
        <div class="text-wrapper_thl8 flex-col">
          <span class="text_th8">课程章节标题6</span>
        </div>
        <div class="image-wrapper_th7 flex-col">
          <img class="image_th9" referrerpolicy="no-referrer"
            src="https://lanhu-oss.lanhuapp.com/5cf3b6ffe7056a07bbc4591d7f282834" />
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import axios from "axios";
import debounce from 'lodash/debounce';
export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      username: "",
      password: "",
    }
  },
  methods: {
    goBackMain() {
      this.$router.push('/anmain');
    },
    jumpToFour() {
      this.$router.push('/anfours');
    }
  },
  created() {
    console.group('创建实例之后');
    console.log('执行完毕这个钩子函数, 才会去捕获页面上的内容, 准备渲染页面');
  },
  mounted() {
    //修复加载的旋转圆圈位置下移
    console.log('mounted==>>')

  },
  watch: {
    $route(to, from) {

    }
  }
}
</script>

<style>
@import './common.css';

.page {
  position: relative;
  width: 100%;
  height: 56.25vw;
  overflow: hidden;
}

span {
  caret-color: transparent;
}


.group_th1 {
  height: 56.25vw;
  background: url(https://lanhu-oss.lanhuapp.com/1f44f2cd3420500e41b8232df97fd3c9) 100% no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.image-wrapper_tht1 {
  height: 18.81vw;
  background: url(https://lanhu-oss.lanhuapp.com/9f1e008682060e18ebd820b4599123f2) 100% no-repeat;
  background-size: 100% 100%;
  margin-top: 37.45vw;
  width: 100%;
}

.image_th1 {
  width: 100%;
  height: 13.7vw;
  margin-top: 5.11vw;
}

.group_th2 {
  height: 46.78vw;
  background: url(https://lanhu-oss.lanhuapp.com/47564d043b8ff6ba4d7e2248b54e94d8) 100% no-repeat;
  background-size: 100% 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.image_th2 {
  width: 100%;
  height: 4.22vw;
  margin-top: 42.82vw;
}

.group_th3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 42.87vw;
}

.group_th4 {
  position: relative;
  width: 100%;
  height: 17.04vw;
  background: url(https://lanhu-oss.lanhuapp.com/6d0fc2fab6ad482928ab2c75a4f084c4) 100% no-repeat;
  background-size: 100% 100%;
}

.image-wrapper_th2 {
  cursor: pointer;
  z-index: 1;
  border-radius: 50%;
  height: 4.59vw;
  border: 2px solid rgba(27, 225, 255, 1);
  width: 4.59vw;
  margin: 4.47vw 0 0 2.6vw;
}

.label_th1 {
  width: 1.1vw;
  height: 1.98vw;
  margin: 1.3vw 0 0 1.71vw;
}

.text_th1 {
  width: 8.44vw;
  height: 1.25vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.3vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  /* line-height: 6.93vw; */
  margin: 1.04vw 0 0 2.96vw;
}

.box_th1 {
  position: absolute;
  left: 3.23vw;
  top: 0.06vw;
  width: 93.75vw;
  height: 35.06vw;
  background: url(https://lanhu-oss.lanhuapp.com/d977f2fdd7dec5bc9271dc8ac51dd544) 100% no-repeat;
  background-size: 100% 100%;
}

.group_th5 {
  width: 98.13vw;
  height: 6.46vw;
  background: url(https://lanhu-oss.lanhuapp.com/555c82d1b296c8272c2449002cb34d92) -0.06vw 0vw no-repeat;
  background-size: 98.17vw 6.45vw;
  margin-top: -0.05vw;
}

.image_th3 {
  width: 10.99vw;
  height: 3.08vw;
  margin: 0.57vw 0 0 1.82vw;
}

.text_th2 {
  text-shadow: 0px 4px 0px rgba(0, 142, 163, 0.7);
  background-image: linear-gradient(180deg,
      rgba(255, 255, 255, 1) 0,
      rgba(255, 255, 255, 1) 49.682617%,
      rgba(27, 225, 255, 1) 99.682617%,
      rgba(27, 225, 255, 1) 100%);
  width: 24.95vw;
  height: 2.92vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 3.12vw;
  font-family: AlibabaPuHuiTi-Bold;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 2.82vw;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 1.4vw 0 0 23.59vw;
}

.image_th4 {
  width: 14.54vw;
  height: 3.49vw;
  margin: 1.19vw 3.07vw 0 19.16vw;
}

.image_th5 {
  width: 24.74vw;
  height: 1.2vw;
  margin: -0.72vw 0 28.17vw 34.37vw;
}

.box_th2 {
  position: absolute;
  left: 7.5vw;
  top: 8.75vw;
  width: 82.92vw;
  height: 47.5vw;
  background: url(https://lanhu-oss.lanhuapp.com/58ba449139221909bf622bc0309cd340) 100% no-repeat;
  background-size: 100% 100%;
}

.group_th6 {
  height: 33.13vw;
  background: url(https://lanhu-oss.lanhuapp.com/2be66035a8b8c34d854e236187f2f64e) -0.32vw -0.32vw no-repeat;
  background-size: 65.88vw 33.59vw;
  width: 65.27vw;
  margin: -1.04vw 0 0 9.32vw;
}

.image-wrapper_th3 {
  z-index: 1;
  height: 29.8vw;
  background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/8d1bf869b72c46b9abce7882409e5380_mergeImage.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 62.14vw;
  margin: 1.04vw 0 0 1.51vw;
}

.image_th6 {
  cursor: pointer;
  width: 6.25vw;
  height: 6.46vw;
  margin: 11.66vw 0 0 27.91vw;
}

.group_th7 {
  background-image: linear-gradient(147deg,
      rgba(18, 50, 103, 1) 0,
      rgba(18, 50, 103, 1) 0,
      rgba(18, 50, 103, 0.701961) 48.974609%,
      rgba(0, 71, 91, 1) 50%,
      rgba(6, 137, 145, 1) 100%,
      rgba(6, 137, 145, 0.8) 100%);
  border-radius: 10px;
  width: 56.46vw;
  height: 8.49vw;
  border: 1px solid rgba(0, 0, 0, 1);
  margin: 2.03vw 0 4.89vw 14.27vw;
}

.text-wrapper_th2 {
  border-radius: 10px;
  height: 9.33vw;
  border: 1px solid rgba(0, 0, 0, 1);
  width: 57.4vw;
  position: absolute;
  left: 13.81vw;
  top: 33.7vw;
}

.paragraph_th1 {
  width: 52.77vw;
  height: 5.37vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.35vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  line-height: 2.04vw;
  margin: 1.97vw 0 0 1.97vw;
}

.label_th2 {
  width: 1.31vw;
  height: 1.2vw;
  margin: 12.7vw 0 11.92vw 97.18vw;
}

.image_th7 {
  position: absolute;
  left: 16.62vw;
  top: 6.98vw;
  width: 65.63vw;
  height: 31.57vw;
}

.image-wrapper_th4 {
  height: 10.73vw;
  background: url(https://lanhu-oss.lanhuapp.com/ac1a9bed1b231a7f3e71df2b648c6268) 0vw -0.06vw no-repeat;
  background-size: 13.02vw 11.92vw;
  width: 13.03vw;
  position: absolute;
  left: 80.47vw;
  top: 41.57vw;
}

.image_th8 {
  cursor: pointer;
  width: 11.1vw;
  height: 12.4vw;
  margin: -3.75vw 0 0 0.93vw;
}

.group_th8 {
  height: 5.73vw;
  background: url(https://lanhu-oss.lanhuapp.com/8d418e47a8da33d500621ca893bbb4c3) -0.63vw -0.58vw no-repeat;
  background-size: 15.15vw 6.97vw;
  width: 13.91vw;
  position: absolute;
  left: 83.44vw;
  top: 31.25vw;
}

.image-wrapper_th5 {
  width: 0.63vw;
  height: 0.68vw;
}

.thumbnail_1 {
  width: 0.63vw;
  height: 0.68vw;
}

.text-wrapper_th3 {
  width: 11.05vw;
  height: 1.36vw;
  margin: 0.88vw 0 0 1.4vw;
}

.text_th3 {
  width: 11.05vw;
  height: 1.36vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.35vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.88vw;
}

.image-wrapper_th6 {
  width: 1.46vw;
  height: 1.41vw;
  margin: 1.35vw 0 0.05vw 2.81vw;
}

.label_th3 {
  width: 1.46vw;
  height: 1.41vw;
}

.text-wrapper_thl1 {
  height: 3.39vw;
  background: url(https://lanhu-oss.lanhuapp.com/365b9bed2db57194c244f613c1e069aa) 100% no-repeat;
  background-size: 100% 100%;
  width: 13.7vw;
  position: absolute;
  left: 0.96vw;
  top: 12.31vw;
}

.text-wrapper_thl4 {
  height: 3.39vw;
  /* linear-gradient(90deg, rgba(64, 243, 253, 0), rgba(64, 243, 253, 0.5) ), */
  background: url(https://lanhu-oss.lanhuapp.com/b9159fef729140092074d933803dc36a) 100% no-repeat;
  background-size: 100% 100%;
  width: 12.97vw;
  position: absolute;
  left: 0;
  top: 16.31vw;
}

.text_th4 {
  width: 8.49vw;
  height: 1.25vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.3vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  /* line-height: 6.93vw; */
  margin: 1.04vw 0 0 2.76vw;
}

.text-wrapper_thl5 {
  height: 3.39vw;
  background: url(https://lanhu-oss.lanhuapp.com/e97919b3f00a7988fe6fd3220c87625f) 100% no-repeat;
  background-size: 100% 100%;
  width: 12.04vw;
  position: absolute;
  left: 0;
  top: 20.37vw;
}

.text_th5 {
  width: 8.49vw;
  height: 1.25vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.3vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  /* line-height: 6.93vw; */
  margin: 1.04vw 0 0 2.34vw;
}

.text-wrapper_thl6 {
  height: 3.39vw;
  background: url(https://lanhu-oss.lanhuapp.com/f50886930ffda26bc2a26de5db1e10b9) 100% no-repeat;
  background-size: 100% 100%;
  width: 12.14vw;
  position: absolute;
  left: 0;
  top: 24.38vw;
}

.text_th6 {
  width: 8.49vw;
  height: 1.25vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.3vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  /* line-height: 6.93vw; */
  margin: 1.04vw 0 0 2.44vw;
}

.text-wrapper_thl7 {
  height: 3.39vw;
  background: url(https://lanhu-oss.lanhuapp.com/f11a9a8ff29690023f43323e6cd0bf08) 100% no-repeat;
  background-size: 100% 100%;
  width: 13.03vw;
  position: absolute;
  left: 0.06vw;
  top: 28.44vw;
}

.text_th7 {
  width: 8.49vw;
  height: 1.25vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.3vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  /* line-height: 6.93vw; */
  margin: 1.04vw 0 0 2.81vw;
}

.text-wrapper_thl8 {
  height: 3.39vw;
  background: url(https://lanhu-oss.lanhuapp.com/b89601bf8e7f2c5f2bbcf2a4660d3eae) 100% no-repeat;
  background-size: 100% 100%;
  width: 13.7vw;
  position: absolute;
  left: 1.15vw;
  top: 32.5vw;
}

.text_th8 {
  width: 8.49vw;
  height: 1.25vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.3vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  /* line-height: 6.93vw; */
  margin: 1.04vw 0 0 2.96vw;
}

.image-wrapper_th7 {
  height: 25.47vw;
  background: url(https://lanhu-oss.lanhuapp.com/9e58d29197e90d954cc54680884ed547) -0.06vw 0vw no-repeat;
  background-size: 3.69vw 25.52vw;
  width: 3.65vw;
  position: absolute;
  left: 12.24vw;
  top: 11.36vw;
}

.image_th9 {
  width: 3.08vw;
  height: 3.39vw;
  margin: 11.04vw 0 0 0.05vw;
}
</style>
